<template>
  <div class="edit_dialog">
    <div class="edit_list">
      <el-form
        ref="form"
        :rules="rules"
        :model="form"
        label-position="left"
        label-width="110px"
      >
        <el-row v-if="typeOptions.length">
          <el-col
            :span="12"
            v-for="(item, index) in header"
            :key="index"
            :data-type="item.columnType"
          >
            <template v-if="item.columnType === 'INT'"> </template>
            <template v-if="item.columnType === 'LONG'"> </template>
            <template v-if="item.columnType === 'FLOAT'"> </template>
            <template v-if="item.columnType === 'DOUBLE'">
              <el-form-item :label="item.columnName" :prop="item.columnCode">
                <el-input-number
                  class="bin_input"
                  v-model="form[item.columnCode]"
                  :precision="6"
                  :step="0.000001"
                  :placeholder="item.dataRequirements"
                  style="width: 250px"
                ></el-input-number>
              </el-form-item>
            </template>
            <template v-if="item.columnType === 'BOOLEAN'">
              <el-form-item :label="item.columnName" :prop="item.columnCode">
                <el-select
                  filterable
                  class="bin_select"
                  v-model="form[item.columnCode]"
                  placeholder="请选择真假值"
                  style="width: 250px !important"
                >
                  <el-option label="真值" value="1"> </el-option>
                  <el-option label="假值" value="0"> </el-option>
                </el-select>
              </el-form-item>
            </template>

            <template v-if="item.columnType === 'DATE'">
              <el-form-item :label="item.columnName" :prop="item.columnCode">
                <el-date-picker
                  class="bin_datetime"
                  popper-class="bin_datetime_popper"
                  v-model="form[item.columnCode]"
                  type="date"
                  placeholder="选择日期"
                  value-format="yyyy-MM-dd"
                  style="border: none; width: 250px !important"
                >
                </el-date-picker>
              </el-form-item>
            </template>

            <template v-if="item.columnType === 'TIMESTAMP'">
              <el-form-item :label="item.columnName" :prop="item.columnCode">
                <el-date-picker
                  class="bin_datetime"
                  popper-class="bin_datetime_popper"
                  v-model="form[item.columnCode]"
                  type="datetime"
                  placeholder="选择日期时间"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  style="border: none; width: 250px !important"
                >
                </el-date-picker>
              </el-form-item>
            </template>

            <template v-if="item.columnType === 'DECIMAL'"> </template>
            <template v-if="item.columnType === 'BINARY'">
              <el-form-item :label="item.columnName" :prop="item.columnCode">
                <el-upload
                  class="upload-demo"
                  ref="upload"
                  multiple
                  :auto-upload="false"
                  :show-file-list="false"
                  action="/"
                  :on-change="
                    (files) => {
                      changeFile(files, item.columnCode);
                    }
                  "
                >
                  <el-button class="bin_button" size="mini">选择文件</el-button>
                </el-upload>
              </el-form-item>
            </template>
            <template v-if="item.columnType === 'TIME'">
              <el-form-item :label="item.columnName" :prop="item.columnCode">
                <el-time-picker
                  class="bin_datetime"
                  v-model="form[item.columnCode]"
                  value-format="HH:mm:ss"
                  placeholder="选择时间"
                  style="border: none; width: 250px !important"
                >
                </el-time-picker>
              </el-form-item>
            </template>
            <template v-if="item.columnType === 'BLOB'"> </template>

            <template v-if="item.columnType === 'DATETIME'">
              <el-form-item :label="item.columnName" :prop="item.columnCode">
                <el-date-picker
                  popper-class="bin_datetime_popper"
                  type="datetime"
                  class="bin_datetime"
                  v-model="form[item.columnCode]"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期时间"
                  @change="consolelog"
                  style="border: none; width: 250px !important"
                >
                </el-date-picker>
              </el-form-item>
            </template>
            <template
              v-if="
                item.columnType !== 'BOOLEAN' &&
                item.columnType !== 'TIMESTAMP' &&
                item.columnType !== 'BINARY' &&
                item.columnType !== 'DATE' &&
                item.columnType !== 'DATETIME' &&
                item.columnType !== 'TIME' &&
                item.columnType !== 'DOUBLE'
              "
            >
              <el-form-item
                :label="item.columnName"
                :prop="item.columnCode"
                :key="item.columnName + item.columnCode"
              >
                <!--   :placeholder="showTypeProp(item.columnType, 'eg')" -->
                <!-- @input="(e, v) => inputchange(e, v, item.columnCode)" -->

                <el-input
                  class="bin_input"
                  v-model="form[item.columnCode]"
                  maxlength="85"
                  :placeholder="item.dataRequirements"
                  @change="(e, v) => inputchange(e, v, item.columnCode)"
                  style="width: 250px"
                ></el-input>
              </el-form-item>
            </template>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="edit_btns">
      <el-button class="bin_button" size="small" @click="cancelBtn">
        取消
      </el-button>
      <el-button class="bin_button" size="small" @click="editCommit">
        确认
      </el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: "editDialog",
  props: {
    header: {
      type: Array,
      default: () => {
        return [];
      },
    },
    currEdit: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      form: {},
      typeEg: {
        STRING: "字符串",
        INT: "1050",
        LONG: "14434973784",
        FLOAT: "3.45",
        DOUBLE: "1.1956486",
        DECIMAL: "114",
      },
      typeOptions: [],
      rules: {},
    };
  },
  watch: {
    currEdit: {
      deep: true,
      immediate: true,
      handler(newval, oldval) {
        console.log("newval==", newval);
        this.form = JSON.parse(JSON.stringify(this.currEdit));
      },
    },
    header: {
      deep: true,
      immediate: true,
      handler(newval, oldval) {
        if (newval && this.header.length) {
          for (let index = 0; index < this.header.length; index++) {
            const element = this.header[index];
            if (element.columnRequired === "1") {
              this.rules[element.columnCode] = [
                {
                  required: true,
                  message: "请输入" + element.columnName,
                  trigger: "blur",
                },
              ];
            }
          }
        }
      },
    },
  },
  computed: {
    showTypeProp: {
      get: function () {
        return function (typeId, prop) {
          return this.typeOptions.filter((item) => {
            return item.value === typeId;
          })[0][prop];
        };
      },
    },
  },
  created() {
    this.getType();
  },
  mounted() {
    console.log("this.header==", this.header);
  },
  methods: {
    inputchange(r, e, w) {
      console.log(r, e, w);
    },
    consolelog(string) {
      console.log("string===", string);
    },
    getType() {
      this.$api.getMetadataType().then((res) => {
        if (res.code == 200) {
          let arr = JSON.parse(JSON.stringify(res.result));
          this.typeOptions = arr.map((e) => {
            e.eg = this.typeEg[e.value] || "";
            return e;
          });
        }
      });
    },
    changeFile(file, prop) {
      this.$set(this.form, prop, file);
    },
    cancelBtn() {
      this.$emit("cancel");
    },
    adddialogshow() {
      this.addDialogVisible = true;
    },
    editFn() {
      this.editDialogVisible = true;
    },
    editCommit() {
      console.log("点击时==", this.form);
      Object.keys(this.form).forEach((key) => {
        if (this.form[key] === "") {
          this.form[key] = null;
        }
      });
      this.$emit("confirm", this.form);
      setTimeout(() => {
        this.form = {};
      }, 1000);
    },
    record() {
      this.recordDialogShow = true;
    },
    delete1() {
      this.delDialogShow = true;
    },
    convertDialogVisibleFn() {},
    exprotModelFn() {},
  },
};
</script>
<style lang="scss" scoped>
.edit_dialog {
  .edit_list {
    display: flex;
    flex-wrap: wrap;
    box-sizing: border-box;
    .edit_item {
      display: flex;
      align-items: center;
      width: 50%;
      margin-bottom: 18px;
      .name {
        width: 120px;
        font-size: 18px;
        text-align: right;
        color: #fff;
      }
      .ipt {
        width: calc(100% - 180px);
      }
      .type {
        margin-left: 10px;
        box-sizing: border-box;
        height: 24px;
        background: #02526b;
        border-radius: 20px 20px 20px 20px;
        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        padding: 0 5px;
        word-break: keep-all;
        line-height: 24px;
        color: #02fff4;
        text-align: center;
      }
    }
    ::v-deep .el-form--label-left .el-form-item__label {
      color: #fff;
    }
  }
  .edit_btns {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
  }
}
</style>
